<!--
 * @Author: 关棺 3156298705@qq.com
 * @Date: 2024-12-18 15:21:04
 * @LastEditors: 关棺 3156298705@qq.com
 * @LastEditTime: 2024-12-19 10:38:23
 * @FilePath: \supervision-ui\src\views\file\fileVersion\components\filePreviewDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-dialog :title="title" :visible.sync="visible" @close="handleClose" width="80%">
      <el-table :data="fileList" style="width: 100%">
        <el-table-column prop="name" label="文件名"></el-table-column>
        <el-table-column prop="type" label="文件格式"></el-table-column>
        <el-table-column label="预览" >
          <template slot-scope="scope">
            <!-- 图片预览 -->
            <img v-if="isImage(scope.row.type)" :src="scope.row.url" alt="预览" style="width: 100px; height: 100px;" />
            <!-- PDF 预览 -->
            <iframe v-else-if="isPdf(scope.row.type)" :src="scope.row.url" style="width: 100%; height: 500px;" />
            <!-- 文本文件预览 -->
            <pre v-else-if="isText(scope.row.type)">{{ scope.row.content }}</pre>
            <!-- 音频预览 -->
            <audio v-else-if="isAudio(scope.row.type)" :src="scope.row.url" controls></audio>
            <!-- 视频预览 -->
            <video v-else-if="isVideo(scope.row.type)" :src="scope.row.url" controls style="width: 100%; height: auto;"></video>
            <!-- 其他文件提示 -->
            <span v-else>暂不支持预览</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name: "FilePreviewDialog",
    data() {
      return {
        title: "预览文件列表",
        visible: false,
        fileList: []
      };
    },
    methods: {
      // 初始化文件列表
      init(arr) {
        this.visible = true;
        this.fileList = arr;
      },
      // 关闭弹窗时触发
      handleClose() {
        this.visible = false;
      },
      // 判断是否为图片
      isImage(type) {
        return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(type);
      },
      // 判断是否为 PDF
      isPdf(type) {
        return type === 'pdf';
      },
      // 判断是否为文本文件
      isText(type) {
        return ['txt', 'log', 'json', 'xml', 'csv'].includes(type);
      },
      // 判断是否为音频文件
      isAudio(type) {
        return ['mp3', 'wav', 'ogg'].includes(type);
      },
      // 判断是否为视频文件
      isVideo(type) {
        return ['mp4', 'webm', 'ogg'].includes(type);
      }
    },
  };
  </script>
  
  <style scoped>
  /* 自定义样式 */
  pre {
    white-space: pre-wrap; /* 自动换行 */
    word-wrap: break-word;
    max-height: 300px;
    overflow-y: auto;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
  }
  </style>